import '../styles/globals.css'
import React, { useState, createContext, useContext, useEffect, useMemo } from "react";
import type { AppProps } from 'next/app'
import Layout from '../components/layout'
import useUser from '../lib/useUser'
import useEvents from '../lib/useEvents'
import { SWRConfig } from 'swr'
import fetchJson from '../lib/fetchJson'
import { useRouter } from 'next/router';


export const UserContext = createContext({});
function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const [userInfo, setUserInfo] = useState({});
  useEffect(() => {
    setUserInfo({
      name: 'cao-xiangyang',
      age: '18',
    })
  }, [])
  useEffect(() => {
    console.log(router)
    const handleRouteChange = (url, { shallow }) => {
      console.log(
        `App is changing to ${url} ${
          shallow ? 'with' : 'without'
        } shallow routing`
      )
    }
    const handleRouteChangeComplete = (url, { shallow }) => {
      console.log(
        `App is changComplete to ${url} ${
          shallow ? 'with' : 'without'
        } shallow routing`
      )
    }
    const handleBeforeHistoryChanger = (url, { shallow }) => {
      console.log(
        `App is BeforeHistoryChanger to ${url} ${
          shallow ? 'with' : 'without'
        } shallow routing`
      )
    }
    const handleHashChangeStart = (url, { shallow }) => {
      console.log(
        `App is HashChangeStart to ${url} ${
          shallow ? 'with' : 'without'
        } shallow routing`
      )
    }
    const handleHashChangeComplete = (url, { shallow }) => {
      console.log(
        `App is hashChangeComplete to ${url} ${
          shallow ? 'with' : 'without'
        } shallow routing`
      )
    }
    const handleRouteChangeError = (err, url) => {
      if (err.cancelled) {
        console.log(`Route to ${url} was cancelled!`)
      }
    }

    router.events.on('routeChangeStart', handleRouteChange)
    router.events.on('routeChangeComplete', handleRouteChangeComplete)
    router.events.on('routeChangeError', handleRouteChangeError)
    router.events.on('beforeHistoryChange', handleBeforeHistoryChanger)
    router.events.on('hashChangeStart', handleHashChangeStart)
    router.events.on('hashChangeComplete', handleHashChangeComplete)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
      router.events.off('routeChangeComplete', handleRouteChangeComplete)
      router.events.off('routeChangeError', handleRouteChangeError)
      router.events.off('beforeHistoryChange', handleBeforeHistoryChanger)
      router.events.off('hashChangeStart', handleHashChangeStart)
      router.events.off('hashChangeComplete', handleHashChangeComplete)
    }
  }, [])

  const getLayout = Component.getLayout || ((page) => page)
  return (
    // <Layout>
    <SWRConfig
      value={{
        fetcher: fetchJson,
        onError: (err) => {
          console.error(err)
        },
      }}
    >
      <UserContext.Provider value={userInfo}>
        {getLayout(<Component {...pageProps} />)}
      </UserContext.Provider>
    </SWRConfig>
    // </Layout>
  )
}

export default MyApp
